<!--
 * @Description: 产品列表
 * @Author: 黄勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-04-09 17:25:00
 * @LastEditors: 黄勇
 -->
<template>
    <div class="product">
        <div class="main-toolbar">
            <el-button
                plain
                @click="showProductModify"
            >
                <app-icon iconName="vcloud-bianji"></app-icon>
                产品封装
            </el-button>
            <el-button
                plain
                @click="openOrCloseProduct"
            >
                <app-icon iconName="vcloud-switch"></app-icon>
                启用/禁用
            </el-button>
        </div>
        <div class="main-content table-pagination">
            <el-table
                ref="singleCheck"
                :data="productList"
                :height="maxHeight"
                :max-height="maxHeight"
                tooltip-effect="dark"
                style="width: 100%"
                highlight-current-row
                header-row-class-name="header-row"
                @select="(selection, row) => handleRowClick(row)"
                @row-click="handleRowClick"
            >
                <el-table-column type="selection">
                </el-table-column>
                <el-table-column
                    prop="productPackageCode"
                    label="产品编号"
                    width="180"
                >
                </el-table-column>

                <el-table-column
                    prop="productPackageName"
                    label="产品名称"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="productType"
                    label="产品类型"
                >
                </el-table-column>
                <el-table-column
                    prop="productLine"
                    label="产品线"
                >
                </el-table-column>
                <el-table-column
                    prop="productPackageVersionType"
                    label="版本类型"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    prop="productPackageVersion"
                    label="版本号"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column
                    label="产品详情"
                    width="100"
                >
                    <template slot-scope="scope">
                        <span
                            class="table-detail cursor-pointer"
                            @click.stop="showProductDetail(scope.row)"
                        >详情</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="100"
                    label="状态"
                >
                    <template slot-scope="scope">
                        <app-status
                            :type="staticType.getStaticTypeLabel('appStatusType', scope.row.productPackageStatus)"
                            :text="staticType.getStaticTypeLabel('statusType', scope.row.productPackageStatus)"
                        >
                        </app-status>
                    </template>
                </el-table-column>
                <el-table-column
                    label="创建时间"
                    width="180"
                >
                    <template slot-scope="scope">
                        {{dateFormat(Number(scope.row.productPackageCreateDate), "yyyy-MM-dd hh:mm:ss")}}
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                :current-page="pageNum"
                :page-sizes="pageSizes"
                :page-size.sync="pageSize"
                layout="->, total, sizes, prev, pager, next, jumper"
                :total="totalNum"
                @size-change="size => pageSize = size"
                @current-change="num => pageNum = num"
            >
            </el-pagination>

        </div>
        <DetailDialog
            v-if="isShowDetailDialog"
            :detailProduct="detailProduct"
            @close="isShowDetailDialog=false"
        />
        <ModifyDialog
            v-if="isShowModifyDialog"
            @confirm="saveProductSucc"
            @close="isShowModifyDialog=false"
        />
    </div>
</template>

<script>
import AppDialog from "@/components/AppCommon/AppDialog";
import AppStatus from "@/components/AppCommon/AppStatus";
import DetailDialog from "./components/detailDialog";
import ModifyDialog from "./components/modifyDialog";
import { dateFormat, totalPageSize, totalPageSizes } from "@/utils/tool";

export default {
    name: "product",
    components: {
        AppDialog,
        AppStatus,
        DetailDialog,
        ModifyDialog
    },
    computed: {},
    data: () => ({
        dateFormat: dateFormat,
        productList: [],
        checkedProduct: {},
        detailProduct: {},
        isShowDetailDialog: false,
        isShowModifyDialog: false,
        pageSize: totalPageSize,
        pageNum: 1,
        totalNum: 0,
        pageSizes: totalPageSizes, //下拉动态设置当前页数
        maxHeight: 0
    }),
    created() {
        this.getTableMaxHeight();
        window.onresize = () => {
            this.getTableMaxHeight();
        };
        this.getProductList();
    },
    mounted() {},
    beforeDestroy() {
        window.onresize = null;
    },
    watch: {
        pageSize() {
            this.productList = [];
            if (this.pageNum == 1) {
                this.getProductList();
            } else {
                this.pageNum = 1;
            }
        },
        pageNum() {
            this.productList = [];
            this.getProductList();
        }
    },
    methods: {
        // 获取表格高度
        getTableMaxHeight() {
            let height = window.innerHeight;
            this.maxHeight = height - 150;
        },
        // 获取产品列表
        getProductList(size, num) {
            this.api
                .getProductList(
                    {
                        pageSize: size || this.pageSize,
                        pageNum: num || this.pageNum
                    },
                    {
                        loading: true
                    }
                )
                .then(res => {
                    let data = res.data;
                    this.totalNum = Number(data.totalCount);
                    this.productList = data.records;
                })
                .catch(err => {});
        },
        // 可取消选中的单选
        handleRowClick(row) {
            this.$refs.singleCheck.clearSelection();
            if (
                this.checkedProduct &&
                this.checkedProduct.productPackageId === row.productPackageId
            ) {
                this.checkedProduct = {};
                this.$refs.singleCheck.setCurrentRow();
            } else {
                this.checkedProduct = row;
                this.$refs.singleCheck.setCurrentRow(row);
                this.$refs.singleCheck.toggleRowSelection(row);
            }
        },
        showProductModify() {
            this.isShowModifyDialog = true;
        },
        showProductDetail(data) {
            this.isShowDetailDialog = true;
            this.detailProduct = data;
        },
        // 启停用
        openOrCloseProduct() {
            let { checkedProduct, productList, staticType } = this;
            if (!checkedProduct.productPackageId) {
                this.$message({
                    showClose: true,
                    message: "请先选择要启用/禁用的产品",
                    type: "warning"
                });
                return;
            }
            let newStatus = "";
            let succText = "";
            let failText = "";
            switch (checkedProduct.productPackageStatus) {
                case staticType.getStaticTypeValue("statusType", "enable"):
                    newStatus = staticType.getStaticTypeValue(
                        "statusType",
                        "disable"
                    );
                    succText = "停用成功";
                    failText = "停用失败";
                    break;
                case staticType.getStaticTypeValue("statusType", "disable"):
                    newStatus = staticType.getStaticTypeValue(
                        "statusType",
                        "enable"
                    );
                    succText = "启用成功";
                    failText = "启用失败";
                    break;

                default:
                    newStatus = staticType.getStaticTypeValue(
                        "statusType",
                        "enable"
                    );
                    succText = "启用成功";
                    failText = "启用失败";
                    break;
            }
            this.api
                .openOrCloseProduct(
                    {
                        productIds: [checkedProduct.productPackageId],
                        status: newStatus
                    },
                    {
                        customMessage: true
                    }
                )
                .then(res => {
                    if (!res.data.status) {
                        this.$message({
                            showClose: true,
                            message: succText,
                            type: "success"
                        });
                        let product = productList.find(
                            item =>
                                item.productPackageId ===
                                checkedProduct.productPackageId
                        );
                        product.productPackageStatus = newStatus;
                    } else {
                        this.$message({
                            showClose: true,
                            message: failText,
                            type: "error"
                        });
                    }
                })
                .catch(err => {
                    this.$message({
                        showClose: true,
                        message: "启停用失败",
                        type: "error"
                    });
                });
        },
        // 产品生产，添加产品
        saveProductSucc() {
            this.getProductList();
            this.isShowModifyDialog = false;
        }
    }
};
</script>